<template>
    <div class="layui-row">
        <div class="layui-col-md7">
            <table id="messageTable" lay-filter="messageTable" class="layui-table" lay-skin="line"></table>
        </div>
        <div class="layui-col-md4" style="margin-left:20px">
            <table class="layui-table" lay-skin="line">
                <colgroup>
                    <col width="160">
                    <col>
                </colgroup>
                <thead>
                    <tr>
                        <th colspan="2">前端信息</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>框架</td>
                        <td>UnifyAdminLayui</td>
                    </tr>
                    <tr>
                        <td>版本</td>
                        <td>V1.0.0</td>
                    </tr>
                    <tr>
                        <td>浏览器标识</td>
                        <td>{{d.ua}}</td>
                    </tr>
                    <tr>
                        <td>当前IP</td>
                        <td>{{d.ip}}</td>
                    </tr>
                </tbody>
            </table>
            <table class="layui-table" lay-skin="line">
                <colgroup>
                    <col width="160">
                    <col>
                </colgroup>
                <thead>
                    <tr>
                        <th colspan="2">后端信息</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>框架</td>
                        <td>{{d.backendName}}</td>
                    </tr>
                    <tr>
                        <td>版本</td>
                        <td>{{d.backendVersion}}</td>
                    </tr>
                    <tr>
                        <td>运行模式</td>
                        <td>{{d.runMode}}</td>
                    </tr>
                    <tr>
                        <td>相应时间</td>
                        <td>{{d.speed}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script>
    layui.use(['app', 'api', 'jquery', 'table', 'view'], function () {
        const { app, api, jquery: $, table, view} = layui;
        app({
            data: {
                ua: navigator.userAgent,
                ip: "",
                runMode: "",
                speed: "",
                backendName: "",
                backendVersion: "",
                messageRecords: [],
            },
            beforeRender: function () {
                const that = this;

                var startTime = Date.now();
                return Promise.all([
                    new Promise(function (resolve) {
                        Object.defineProperty(window, 'returnCitySN', {
                            set(value) {
                                that.ip = value.cip;
                                resolve();
                            }
                        });
                    }),
                    api("/system/system/info").then(function ({ data }) {
                        var endTime = Date.now();
                        that.runMode = data.mode;
                        that.speed = (endTime - startTime) + "ms";
                        that.backendName = data.name;
                        that.backendVersion = data.version;
                    }),
                ]);
            },
            afterRender: function () {
                api("/system/message/records").then(function ({ data }) {
                    table.render({
                        elem: "#messageTable",
                        page: false,
                        cols: [[
                            { field: 'title', title: '站内信', minWidth: "600"}
                            , { field: 'create_time', templet: "<div>{{layui.util.toDateString(d.create_time * 1000)}}</div>" }
                        ]],
                        data: data,                      
                    });
                    table.on('row(messageTable)', function (obj) {
                        view.newTab(obj.data.title, "/system/message/info", {id:obj.data.id});
                    });
                });

            }
        })
    });
</script>


<style>
    [lay-id="messageTable"] tr{
        cursor: pointer !important;
    }
</style>